<template>
    <div class="order">
        <navigator :level="level" :pathName="pathName"></navigator>
        <div class="search">
            <el-form :inline="true" :model="formSearch" class="form-inline">
                <el-form-item>
                    <el-date-picker type="date" placeholder="阳历日期" v-model="formSearch.solarDate"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker type="date" placeholder="阴历日期" v-model="formSearch.lunarDate"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formSearch.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formSearch.status" placeholder="状态">
                        <el-option v-for="item in statusArr" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">
            <el-table :data="orders" border height="460">
                <!--<el-table-column type="selection" width="50">-->
                <!--</el-table-column>-->
                <el-table-column prop="orderNo" label="订单号" width="140">
                </el-table-column>
                <el-table-column prop="solarDate" label="阳历" width="110" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="lunarDate" label="阴历" width="110" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="contacts[1].name" label="新郎" width="90">
                </el-table-column>
                <el-table-column prop="contacts[0].name" label="新娘" width="90">
                </el-table-column>
                <el-table-column prop="priceTotal" label="总价" width="80">
                </el-table-column>
                <el-table-column prop="bookBy" label="预定人" width="90">
                </el-table-column>
                <el-table-column prop="bookTime" label="预定时间" width="110" :formatter="formatDate">
                </el-table-column>
                <el-table-column prop="bookMoney" label="预定金" width="80">
                </el-table-column>
                <el-table-column prop="bookContact" label="联系信息" width="150">
                </el-table-column>
                <el-table-column prop="status" label="状态 " width="100" :formatter="formatStatus">
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" width="120">
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Navigator from '../../common/navigator.vue';

    export default {
        data () {
            return {
                level: 1,
                pathName: '订单列表',
                orders: [],
                currentPage: 1,
                pageSizes: [10, 20, 30],
                pageSize: 10,
                total: 0,
                formSearch: {
                    solarDate: '',
                    lunarDate: '',
                    orderNo: '',
                    status: ''
                },
                statusArr: [
                    {label: '已预定', value: 10},
                    {label: '已完善', value: 20},
                    {label: '筹备中', value: 30},
                    {label: '进行中', value: 40},
                    {label: '待结算', value: 50},
                    {label: '已结算', value: 60}
                ]
            };
        },
        components: {
            Navigator
        },
        methods: {
            handleSizeChange (val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange (val) {
                console.log(`当前页: ${val}`);
            },
            handleSearch (){

            },
            formatDate (row, column){
                let prop = column.property;
                return new Date(row[prop]).format('yyyy-MM-dd');
            },
            formatStatus (row, column){
                let v = "";
                this.statusArr.every(function (statusObj) {
                    if (statusObj.value == row.status) {
                        v = statusObj.label;
                    } else {
                        return true;
                    }
                });
                return v;
            }
        },
        mounted(){
            let loading = this.$loading({
                target: '.content',
                fullscreen: false,
                text: '拼命加载中'
            });
            let params = {currentPage: this.currentPage, pageSize: this.pageSize};
            this.$http.get('/admin/order/index', {params:params}).then((response) => {
                if (response.ok) {
                    let data = response.data.data;
                    this.orders = data.data;
                    this.currentPage = data.currentPage;
                    this.pageSize = data.numsPerPage;
                    this.total = data.totalPages;
                } else {
                    console.error(response);
                }
                loading.close();
            }, (response) => {
                console.error(response);
                loading.close();
            });
        }
    };
</script>

<style scoped>
    .order {
    }

    .search {
        margin-bottom: -12px;
    }

    .content {
        width: 100%;
        overflow: auto;
    }

    .pagination {
        line-height: 30px;
        text-align: center;
        padding-top: 5px;
    }
</style>
